<template>
  <div class="app-container">
    <el-row type="flex" style="justify-content: space-between">
      <div style="flex: 1; min-width: 0; margin-right: 5px">
        <leaseContract state="detail" v-model="form.replacementCar" />
        <carReplacementService state="detail" v-model="form.replacementCar" />
        <vehicleInformationZD state="detail" v-model="form.replacementCar" />
        <StorageOutInventoryInfoTche state="detail" v-model="form.carOutStorage" />
        <informationForCars state="detail" v-model="form.carInStorage" ref="informationForCars" />
      </div>
      <FlowRecord v-if="flowId" :id="flowId" :customStyle="{ maxWidth: '300px', minWidth: '280px', marginBottom: '20px' }" />
    </el-row>
    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import StorageOutInventoryInfoTche from '@/views/carInventory/components/StorageOutInventoryInfoTche.vue'
import informationForCars from '@/views/carInventory/components/informationForCars.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
import * as inInventoryApi from '@/api/carInventory/inInventory'
export default {
  components: { leaseContract, carReplacementService, vehicleInformationZD, StorageOutInventoryInfoTche, informationForCars },
  name: 'DetailTche',
  data() {
    return {
      form: { replacementCar: {}, carOutStorage: {}, carInStorage: {} },
      loading: false,
      flowId: null,
    }
  },
  computed: {},
  created() {
    this.getDetail()
  },
  methods: {
    // 获取入库单详情
    getDetail() {
      this.loading = true
      inInventoryApi.replacementCar(this.$route.query.orderId).then((res) => {
        if (res.code == 200) {
          this.loading = false
          this.flowId = res.data?.carInStorage?.flowId
          // this.flowId = '4085105'
          this.form = {
            ...res.data,
            replacementCar: {
              ...res?.data?.replacementCar,
            },
            carOutStorage: {
              ...res?.data?.carOutStorage,
            },
            carInStorage: {
              ...res?.data?.carInStorage,
            },
          }
        }
      })
    },
    back() {
      this._toPage({
        name: 'InInventoryList',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
